<template>
    <div>
        <div>
            <el-button type="danger" style="margin: 10px 5px;" @click="batchRemove()">批量删除</el-button>
        </div>
        <el-table
    :data="list"
    border
    style="width: 100%"  @selection-change="handleSelectionChange">
    
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column label="序号" width="200" type="index" align="center">
    </el-table-column>
    <el-table-column prop="integralStart" label="开始积分" width="240" align="center">
    </el-table-column>
    <el-table-column prop="integralEnd" label="截止积分" width="240" align="center">
    </el-table-column>
    <el-table-column prop="borrowAmount" label="借款额度" width="240" align="center">
    </el-table-column>
    <el-table-column
      label="操作"
      width="250" align="center">
      <!-- <template slot-scope="scope">
        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
        <el-button type="text" size="small">Edit</el-button>
      </template> -->
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>

</template>
<script>
import api from '@/api/integralGrade'
export default {
    data(){
        return {
        integralGrade: {},
        list: [],
        checkedList: []
        }
    },
    methods:{
        batchRemove(){
            if(!this.checkedList || this.checkedList.length === 0){
                this.$message.warning('请先选择要删除的数据')
                return;
            }
            this.$confirm('该操作将永久删除数据,您确定吗?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let idList = []
                //循环遍历,获取集合中每个元素的id,再组合成新的id集合
                this.checkedList.forEach(item=>{
                    idList.push(item.id)
                })
                console.log(idList);
                
                api.removeByIds(idList).then(res=>{
                        this.$message.success(res.message || '删除成功')
                        this.fetchData()
                    })
            }).catch(()=>{
                this.$message.info('取消成功')
            })
            
        },
        handleSelectionChange(val){
            this.checkedList = val
        },
        fetchData(){
            api.getAll().then(res=>{
                // console.log(res);
                this.list = res.data.list
            })
        },
        //修改
        handleEdit(index,row){
            //点击修改按钮,直接跳转到修改积分等级的页面,并将当前对象的id信息传过去
            //传递id的方法1
            this.$router.push("/integralGrade/edit/"+row.id);
            //传递id的方法2
            // this.$router.push("/integralGrade/edit?id=" + row.id)

        },
        //根据id删除
        handleDelete(id,obj){
            // console.log(obj.id);
            this.$confirm(`此操作将永久删除[${obj.borrowAmount}]积分等级,是否继续`,'提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                api.removeById(obj.id).then(res=>{
                    this.$message.success('成功' || res.message)
                    this.fetchData()
                })
            }).catch(()=>{
                this.$message.info('取消成功')
            })
        }
    },
    created(){
        this.fetchData()
    },
    mounted(){}
}
</script>